<template>
  <div id="login">
    <navigation index="0" userinfo=""></navigation>
    <div class="login">
      <div class="login-left">
        <h2>Welcome to the forum system</h2>
      </div>
      <div class="login-right">
        <div class="inner" ref="inner" style="display: flex">
          <h2>Log in now</h2>
          <div class="email">
            <svg t="1645032936096" class="icon" viewBox="0 0 1025 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="6656" width="32" height="32">
              <path
                  d="M801.967543 761.504914c-134.407314-49.034971-177.269029-90.360686-177.269029-178.614857 0-52.867657 40.96-35.781486 59.070171-132.871314 7.358171-40.257829 43.534629-0.775314 50.629486-92.730514 0-36.483657-19.792457-45.758171-19.792457-45.758171s10.005943-54.403657 13.955657-96.124343c4.798171-52.106971-30.090971-186.499657-216.444343-186.499657-186.499657 0-221.505829 134.392686-216.532114 186.499657 4.037486 41.735314 14.145829 96.124343 14.145829 96.124343s-20.026514 9.142857-20.026514 45.758171c7.050971 92.028343 43.271314 52.472686 50.688 92.730514 18.051657 97.133714 59.026286 79.989029 59.026286 132.871314 0 88.254171-42.832457 129.579886-177.283657 178.614857C87.478857 810.525257 0 860.511086 0 894.624914L0 1009.371429l1024 0 0-114.746514C1024.131657 860.642743 936.579657 810.525257 801.967543 761.504914L801.967543 761.504914M801.967543 761.504914 801.967543 761.504914z"
                  p-id="6657" fill="#999999"></path>
            </svg>
            <input type="email" v-model:value="email" placeholder="请输入邮箱" @blur="handleBlurEmail"
                   @input="handleInputEmail">
            <div class="email-error" style="display: none" ref="emailError">
              <svg t="1645034774429" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="1265" width="16" height="16">
                <path
                    d="M512 0a512 512 0 1 1 0 1024A512 512 0 0 1 512 0z m0 696.027429c-26.185143 0-47.396571 22.528-47.396571 50.249142 0 27.721143 21.211429 50.249143 47.396571 50.249143 26.258286 0 47.396571-22.528 47.396571-50.322285 0-27.574857-21.211429-50.102857-47.396571-50.102858v-0.073142z m0-468.48c-26.185143 0-47.396571 22.454857-47.396571 50.176v301.202285c0 27.794286 21.211429 50.176 47.396571 50.176 26.258286 0 47.396571-22.454857 47.396571-50.176V277.796571c0-27.794286-21.211429-50.249143-47.396571-50.249142z"
                    p-id="1266" fill="#e92121"></path>
              </svg>
              <span>{{ emailMsg }}</span>
            </div>
          </div>
          <div class="passwd">
            <svg t="1645033567657" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="8310" width="32" height="32">
              <path
                  d="M920.8 409.6H166.4c-22.4 0-40 17.6-40 40v520.8c0 22.4 17.6 40 40 40h754.4c22.4 0 40-17.6 40-40V449.6c0-22.4-18.4-40-40-40zM604 715.2v75.2c0 33.6-27.2 60.8-60.8 60.8-33.6 0-60.8-27.2-60.8-60.8v-75.2c-15.2-15.2-24.8-36.8-24.8-60.8C457.6 606.4 496 568 544 568c48 0 86.4 38.4 86.4 86.4-0.8 24-10.4 45.6-26.4 60.8z"
                  fill="#999999" p-id="8311"></path>
              <path
                  d="M350.4 466.4h-64v-192C286.4 127.2 406.4 7.2 553.6 7.2s267.2 120 267.2 267.2v43.2h-64v-43.2c0-112-91.2-203.2-203.2-203.2-112 0-203.2 91.2-203.2 203.2v192z"
                  fill="#999999" p-id="8312"></path>
              <path d="M756 318.4a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#999999" p-id="8313"></path>
            </svg>
            <input :type="showPassword ? 'text':'password'" v-model:value="password" placeholder="请输入密码"
                   @blur="handleBlurPassword"
                   @input="handleInputPassword">
            <svg t="1645034230534" class="icon" v-show="!showPassword" @click="showPassword = true"
                 viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="10604" width="32" height="32">
              <path
                  d="M512.088 371.032l145.256 144.8v-7.336c0-76.056-61.4-137.464-137.472-137.464h-7.784m-197.032 36.656l71.024 71.024a126.368 126.368 0 0 0-3.664 29.784c0 76.072 61.4 137.472 137.464 137.472 10.088 0 20.168-1.376 29.792-3.664l71.024 71.024c-30.704 15.12-64.608 24.28-100.816 24.28-126.472 0-229.104-102.64-229.104-229.112 0-36.2 9.152-70.104 24.28-100.808M61.664 154.296l104.472 104.472 20.624 20.624C111.152 338.96 51.584 416.848 15.84 508.496c79.272 201.168 274.928 343.664 504.032 343.664a539.376 539.376 0 0 0 200.696-38.496l19.712 19.248 133.8 133.8 58.192-58.192L119.856 96.104m400.016 183.288c126.472 0 229.112 102.64 229.112 229.104a219.76 219.76 0 0 1-16.504 83.4l134.264 134.256c68.728-57.272 123.712-132.424 157.168-217.656-79.272-201.152-274.928-343.656-504.04-343.656-64.152 0-125.544 11.464-183.28 32.08l99.432 98.512c26.12-10.088 54.072-16.04 83.848-16.04z m0 0"
                  p-id="10605" fill="#999999"></path>
            </svg>
            <svg t="1645089780354" class="icon" v-show="showPassword" @click="showPassword = false"
                 viewBox="0 0 1389 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="5233" width="32" height="32">
              <path
                  d="M661.80282498 730.57815228a219.3773129 219.3773129 0 1 1 219.37731207-219.3773129 219.91765072 219.91765072 0 0 1-219.37731207 219.3773129zM1233.48064914 511.74117804a451.18240412 451.18240412 0 0 0-26.47657178-78.88937832 584.1056033 584.1056033 0 0 0-78.34904049-137.24590513A520.34569492 520.34569492 0 0 0 954.66613379 153.49694571 645.1638209 645.1638209 0 0 0 661.80282498 90.27737515a644.62348306 644.62348306 0 0 0-291.78263315 63.75990921A523.58772437 523.58772437 0 0 0 194.95061228 295.60589459 586.26695627 586.26695627 0 0 0 116.6015726 432.85179971 445.23868387 445.23868387 0 0 0 90.125 511.74117804a450.10172763 450.10172763 0 0 0 26.4765726 79.42971698 587.34763275 587.34763275 0 0 0 78.34903968 137.2459043 520.34569492 520.34569492 0 0 0 175.06957954 141.56861106 648.40585034 648.40585034 0 0 0 291.78263316 63.75990838A645.1638209 645.1638209 0 0 0 954.66613379 869.98541038a523.04738572 523.04738572 0 0 0 175.06957956-141.56861106 584.1056033 584.1056033 0 0 0 78.34903967-137.78624295 451.18240412 451.18240412 0 0 0 26.47657261-78.88937833zM661.80282498 382.0600083a129.14083191 129.14083191 0 1 0 91.31715666 37.82367444 128.06015543 128.06015543 0 0 0-91.31715666-37.82367444z"
                  fill="#999999" p-id="5234"></path>
            </svg>
            <div class="email-error" style="display: none" ref="passwordError">
              <svg t="1645034774429" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="1265" width="16" height="16">
                <path
                    d="M512 0a512 512 0 1 1 0 1024A512 512 0 0 1 512 0z m0 696.027429c-26.185143 0-47.396571 22.528-47.396571 50.249142 0 27.721143 21.211429 50.249143 47.396571 50.249143 26.258286 0 47.396571-22.528 47.396571-50.322285 0-27.574857-21.211429-50.102857-47.396571-50.102858v-0.073142z m0-468.48c-26.185143 0-47.396571 22.454857-47.396571 50.176v301.202285c0 27.794286 21.211429 50.176 47.396571 50.176 26.258286 0 47.396571-22.454857 47.396571-50.176V277.796571c0-27.794286-21.211429-50.249143-47.396571-50.249142z"
                    p-id="1266" fill="#e92121"></path>
              </svg>
              <span>{{ passwordMsg }}</span>
            </div>
          </div>

          <div class="remember-password">
            <input type="checkbox" id="remember-password" v-model:value="rememberPassword">
            <label for="remember-password">记住密码</label>
          </div>
          <div class="login-btn">
            <a class="btn-lo" @click="handleLogin">登录</a>
            <router-link class="btn-reg" to="register">注册</router-link>
          </div>
        </div>
        <div class="login-success" ref="loginSuccess" style="display: none">
          <svg t="1645078478437" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="3583" width="120" height="120">
            <path
                d="M512 32C246.4 32 32 249.6 32 512s217.6 480 480 480 480-217.6 480-480S774.4 32 512 32z m268.8 380.8L496 697.6c-25.6 25.6-60.8 25.6-83.2 0L243.2 528c-25.6-25.6-25.6-60.8 0-83.2s60.8-25.6 83.2 0l128 128 240-240c25.6-25.6 60.8-25.6 83.2 0 25.6 19.2 25.6 54.4 3.2 80z"
                p-id="3584" fill="#3981ff"></path>
          </svg>
          <div>
            <p>您已登录成功！</p>
            <p>2秒后跳转首页</p>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>copyright&copy;世赛小组</p>
    </div>
  </div>
</template>

<script>
import navigation from "../../components/navigation";
import router from "../../router";

export default {
  name: "index",
  data() {
    return {
      email: localStorage.getItem('email'),
      emailMsg: '',
      password: localStorage.getItem('password'),
      passwordMsg: '',
      rememberPassword: localStorage.getItem('rememberPassword'),
      showPassword: false
    }
  },
  mounted() {
    sessionStorage.removeItem('token')
    },
  methods: {
    handleBlurEmail: function () {
      if (!/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(this.email)) {
        this.$refs.emailError.style.display = 'flex'
        this.emailMsg = '请输入正确的邮箱'
      } else {
        this.$refs.emailError.style.display = 'none'
        this.emailMsg = ''
      }
    },
    handleInputEmail: function () {
      this.$refs.emailError.style.display = 'none'
      this.emailMsg = ''
    },
    handleBlurPassword: function () {
      if (!/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/.test(this.password)) {
        this.$refs.passwordError.style.display = 'flex'
        this.passwordMsg = '请输入包含大小写字母和数字的密码'
      } else {
        this.$refs.passwordError.style.display = 'none'
        this.passwordMsg = ''
      }
    },
    handleInputPassword: function () {
      this.$refs.passwordError.style.display = 'none'
      this.passwordMsg = ''
    },
    handleLogin: function () {
      if (this.email == '') {
        this.$refs.emailError.style.display = 'flex'
        this.emailMsg = '请输入邮箱'
      }
      if (this.password == '') {
        this.$refs.passwordError.style.display = 'flex'
        this.passwordMsg = '请输入密码'
      }
      if (this.email != '' && this.password != '' && /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(this.email) && /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/.test(this.password)) {
        this.Request('post', '/v1/login', {
          email: this.email,
          pwd: this.password,
        }).then(res => {
          if (res.code == '501') {
            this.$refs.passwordError.style.display = 'flex'
            this.passwordMsg = res.msg
          }
          if (res.code == '200') {
            if (this.rememberPassword) {
              localStorage.setItem('email', this.email)
              localStorage.setItem('password', this.password)
            } else {
              localStorage.setItem('email', '')
              localStorage.setItem('password', '')
            }
            localStorage.setItem('rememberPassword', this.rememberPassword)
            this.$refs.inner.style.display = 'none'
            this.$refs.loginSuccess.style.display = 'flex'
            sessionStorage.setItem('token', res.data)
            router.push('home')
          }
        })
      }
    }
  },
  components: {
    navigation
  }
}
</script>

<style lang="less">

#login {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url("../../assets/login_bg.png") no-repeat;
  background-size: cover;

  .login {
    width: 1200px;
    margin: 140px auto;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 11px 34px -21px rgba(138, 138, 138, 1);
    border-radius: 10px;

    .login-left {
      width: 560px;
      height: 598px;
      padding: 22px 0 0 37px;
      border-radius: 10px 0 0 10px;
      background: url("../../assets/picture.png") no-repeat;
      background-size: cover;

      h2 {
        color: #fff;
        font-size: 30px;
        width: 230px;
        line-height: 52px;
      }
    }

    .login-right {
      width: 640px;
      height: 598px;
      background: #fff;
      border-radius: 0 10px 10px 0;

      .inner {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 400px;
        margin: 60px auto;

        h2 {
          color: #333;
          font-size: 40px;
          text-align: center;
          margin-bottom: 50px;
        }

        .email,
        .passwd {
          position: relative;
          height: 65px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #BFBFBF;
          margin-bottom: 5px;
        }

        .email-error {
          position: absolute;
          top: 70px;
          gap: 10px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          z-index: 10;
          font-size: 13px;
          color: #F5222D;
        }

        .email input,
        .passwd input {
          width: 400px;
          border: none;
          height: 52px;
          text-indent: 50px;
          font-size: 18px;
          font-weight: 400;
          color: #000;
        }

        .email input::placeholder,
        .passwd input::placeholder {
          color: #CECECE;
        }

        .email > svg,
        .passwd > svg:first-child {
          position: absolute;
        }

        .login-error {
          display: flex;
          align-items: center;
          margin-top: 14px;

          span {
            margin-left: 10px;
            font-size: 14px;
            color: #F5222D;
          }
        }

        .remember-password {
          margin-top: 20px;
          display: flex;
          align-items: center;

          input {
            width: 20px;
            height: 20px;
            border: 1px solid #3981FF;
            border-radius: 3px;
            margin-right: 10px;
          }

          label {
            color: #3981FF;
          }
        }

        .login-btn {
          width: 100%;
          margin: 34px auto;
          display: flex;
          justify-content: space-between;

          a {
            display: inline-block;
            width: 154px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            border-radius: 5px;
            font-size: 20px;
            box-shadow: 0 5px 12px -7px  rgba(57, 129, 255, 1);
            cursor: pointer;
          }

          .btn-lo {
            background: #3981FF;
            color: #FFFFFF;
          }

          .btn-reg {
            border: 1px solid #3981FF;
            color: #3981FF;;
          }
        }
      }

    }
  }

  .footer {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;

    p {
      width: 1200px;
      line-height: 50px;
      margin: 0 auto;
      text-align: center;
      color: #fff;
      font-size: 20px;
    }
  }

  .login-success {
    height: 598px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #3981FF;
    gap: 33px;
  }
}
</style>
